<style scoped>
.publish {
  line-height: 32px;
  font-size: 14px;
  font-weight: bold;
  list-style-type: none;
  padding: 0 12px;
  display: flex;
  flex-flow: column;
  min-height: 32px;
  cursor: pointer;
  color: #f5f5f5;
  background-color: #409eff;
  position: relative;
  top: -1px;
}
.publish:hover {
  background-color: #66b1ff;
}
</style>
<!--  -->
<template>
  <div class="publish" @click.stop="publish" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">保存编辑
  </div>
</template>

<script>
import PubSub from 'pubsub-js'
import { mapState } from 'vuex'
import crypto from '@/core/crypto.js'
// import * as WindowType from '@/config/windowtype.js'
import * as PubsubType from '@/config/pubsubtype.js'
export default {
  created () {
    // 需要固定的主容器组件索引数组传入iframe中，而后置为空
    // window[WindowType.GET_PUBLISH_PAGE_DATA_STRONGE] = (callback) => {
    //   let mainBoxFixed = JSON.parse(JSON.stringify(this.mainBoxFixed))
    //   // this.mainBoxFixed = []
    //   callback(mainBoxFixed, this.scrollTop)
    // }
  },
  mounted () {
    PubSub.subscribe(PubsubType.PUBSUB_IFRAME_LOADING_OVER, (event, data) => {
      this.loading = false
    })
  },
  computed: {
    ...mapState([
      'design'
    ])
  },
  data () {
    return {
      mainBoxFixed: [],
      // 滚动条位置
      scrollTop: 0,
      loading: true
    }
  },
  methods: {
    // 发布页面
    publish () {
      if (this.loading) {
        return
      }
      this.loading = true
      this.design.ref.contentWindow.vueFunc.publish((dataBody, mainBoxFixed, scrollTop) => {
        this.mainBoxFixed = mainBoxFixed
        this.scrollTop = scrollTop
        let postDataBody = crypto.en(dataBody)
        PubSub.publish(PubsubType.PUBSUB_CHANGE_DESIGN_IFRAME_LOADING, true)
        this.$jpost('/action/publish/save', {
          dataBody: postDataBody,
          utime: new Date().getTime()
        }).then(response => {
          if (response === null) {
            PubSub.publish(PubsubType.PUBSUB_DESIGN_REFRESH_PAGE)
          }
          // 刷新当前编辑页面
          // this.$store.dispatch('designRefreshPage', true)
        })
      })
    }
  }
}

</script>
